<template>
  <div class="images-container grids" :style="containerStyle">
    <view class="image-wrapper" v-for="(image, index) in images" :key="index" :style="boxStyle">
      <image :src="image" mode="aspectFill" :style="imageStyle" @click.stop="proxy.$auth.previewImage(images,index)" />
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();

let props = defineProps(["modelValue"]);

let images = ref([]);

let containerStyle = computed(() => {
  let num = 3;
  if (images.value.length == 1) num = 1;
  if ([2, 4].includes(images.value.length)) num = null;
  if (num) {
    return {
      gridTemplateColumns: `repeat(${num}, minmax(0px, 1fr))`,
    };
  } else {
    return {
      display: "flex !important",
      flexWrap: "wrap",
      flexShrink: 0,
      gap: "initial !important",
    };
  }
});

let mode_format = computed(() => {
  if (images.value.length == 1) {
    return "widthFix";
  } else {
    return "aspectFill";
  }
});

let boxStyle = computed(() => {
  if (mode_format.value == "aspectFill") {
    let obj = {};
    if ([2, 4].includes(images.value.length)) {
      obj["width"] = "120px";
      obj["height"] = "120px";
      obj["marginRight"] = "10px";
      obj["marginBottom"] = "10px";
    } else {
      obj["position"] = "relative";
      obj["width"] = "100%";
      obj["paddingTop"] = "100%";
    }
    return obj;
  } else {
    return {
      width: "200px",
    };
  }
});

let imageStyle = computed(() => {
  if (mode_format.value == "aspectFill") {
    let obj = {
      height: "100%",
    };
    if (boxStyle.value.hasOwnProperty("paddingTop")) {
      obj["position"] = "absolute";
      obj["top"] = "0";
      obj["left"] = "0";
      obj["width"] = "100%";
    }
    return obj;
  }
});

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue) {
      if (proxy.$utils.isArray(newValue)) {
        images.value = [...newValue];
      } else {
        images.value = newValue.split(",");
      }
    }
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.images-container {
  gap: 7px 7px; //上下间距 左右间距
  .image-wrapper {
    image {
      display: block;
      border-radius: 10px;
    }
  }
}
</style>






